<template>
	<button type="button" class="Ra3btn">
		<slot></slot>
		<img class="btn_icon" src="../../../public/icon/btn_right_icon_128.png" >
	</button>
</template>

<script>
	export default{
		data() {
			return{
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped="scoped">
	.Ra3btn{
		width: 100%;
		height: 90px;
		margin-top: 40px;
		transform: rotate3d(0,1,0,7deg);
		/*文字区域*/
		padding-left: 40px;
		text-align: left;
		font-size: 30px;
		font-weight: bold;
		color:#f68c14;
		box-shadow: -20px 12px 0px 4px rgba(0,0,0,0.24);
	}
	
	.itemButton{
		height: 40px;
		width: 80%;
		transform: rotate3d(0,1,0,7deg);
	}
	.Ra3btn:hover{
		transform: translateX(30px) rotate3d(0,1,0,7deg);
		box-shadow: -20px 12px 0px 4px rgba(0,0,0,0.24);
		/* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); */
	}
	.btn_icon{
		position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		right: 10px;
		width:10%;
	}
</style>
